<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>点击按钮换背景图片</title>
    <style>
       .image-container {
            width: 900px;
            height: 900px;
            background-size: cover;
            background-position: center;
        }
    </style>
</body>

<body>
    <button id="changeButton">更换图片</button>
    <img id="myImage" src="hua.png" alt="初始图片">
    
</body>

<script>
    //getElementById:按照元素的 id 属性值来查找 HTML 文档中的元素
    let changeButton = document.getElementById('changeButton');
    let myImage = document.getElementById('myImage');

    // 定义一个数组存储多个图片
    let imagePaths = ['hua2.png', 'hua3.png','hua.png'];
    //显示图片索引位置
    let currentIndex = 0;
    //添加事件监听
    changeButton.addEventListener('click', function () {
        //让索引指向下一个元素
        currentIndex++;
        //判断
        if (currentIndex >= imagePaths.length) {
            currentIndex = 0;
        }
        myImage.src = imagePaths[currentIndex];
    });
</script>
</html>